<template>
   <view class="container">

      <!-- 下拉刷新组件 -->
      <scroll-view scroll-y="true" class="scroll-view" refresher-enabled :refresher-triggered="refreshing"
         @refresherrefresh="onRefresh" @scrolltolower="loadMore">
         <!-- 列表内容 -->
         <view class="list">
            <view class="item" v-for="(item, index) in listData" :key="index" @click="navigateToDetail(item)">
               <image class="item-image" :src="item.image" mode="aspectFill"></image>
               <view class="item-content">
                  <view class="item-tag" v-if="item.isMine">我的</view>
                  <text class="item-title">{{ item.title }}</text>
                  <text class="item-desc">{{ item.desc }}</text>
                  <view class="item-meta">
                     <text class="item-price">¥{{ item.price }}/月</text>
                     <text class="item-location">{{ item.location }}</text>
                  </view>
               </view>
            </view>

            <!-- 加载更多提示 -->
            <view class="load-more">
               <text v-if="loading">加载中...</text>
               <text v-else-if="noMore">没有更多数据了</text>
               <text v-else>上拉加载更多</text>
            </view>
         </view>
      </scroll-view>

      <!-- 右下角浮动发布按钮 -->
      <view class="float-btn" @click="navigateToPublish()">
         <text class="icon">+</text>
      </view>
   </view>
</template>

<script>
   import {
      listSpots
   } from "@/api/parking/spots";
   export default {
      data() {
         return {
            listData: [], // 列表数据
            page: 1, // 当前页码
            pageSize: 10, // 每页数据量
            loading: false, // 是否正在加载
            noMore: false, // 是否没有更多数据
            refreshing: false ,// 是否正在刷新
         }
      },
      onShow() {
         this.onRefresh()
      },
      methods: {
         // 加载数据
         async loadAllData() {
            if (this.loading || this.noMore) return

            this.loading = true

            try {
               const newData = await this.getSpots(this.page, this.pageSize)
               if (this.page === 1) {
                  this.listData = newData
               } else {
                  this.listData = [...this.listData, ...newData]
               }
               this.listData = this.listData.map(item => ({
                  ...item,
                  isMine: item.createBy == this.$store.state.user.name
               }))
               // 判断是否还有更多数据
               if (newData.length < this.pageSize) {
                  this.noMore = true
               } else {
                  this.page++
               }
            } catch (error) {
               console.error('加载数据失败:', error)
               uni.showToast({
                  title: '加载失败',
                  icon: 'none'
               })
            } finally {
               this.loading = false
               this.refreshing = false
            }
         },
         navigateToPublish() {
            uni.navigateTo({
               url: '/pages/parking/publish/index'
            })
         },

         // 跳转到详情页
         navigateToDetail(item) {
            uni.navigateTo({
               url: `/pages/parking/detail/index?id=${item.id}`
            });
         },

         // 下拉刷新
         onRefresh() {
            this.refreshing = true
            this.page = 1
            this.noMore = false
            this.loadAllData()
         },

         // 加载更多
         loadMore() {
            if (!this.noMore) {
               this.loadAllData()
            }
         },

         // 获取车位列表
         getSpots(page, pageSize) {
            return listSpots({
               pageNum: page,
               pageSize: pageSize
            }).then(res => {
               return res.rows.map(item => ({
                  id: item.id,
                  title: item.title,
                  desc: item.description,
                  price: item.pricePerMonth,
                  createBy: item.createBy,
                  image: item.photoUrls ? item.photoUrls.split(",")[0] : 'https://picsum.photos/200/200'
               }))
            })
         }
      }
   }
</script>

<style scoped>
   .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: #f5f5f5;
   }

   .header {
      height: 88rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
   }

   .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
   }

   .scroll-view {
      flex: 1;
      height: calc(100vh - 88rpx);
   }

   .list {
      padding: 20rpx;
   }

   .item {
      display: flex;
      padding: 20rpx;
      position: relative;
      margin-bottom: 20rpx;
      background-color: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
   }

   .item-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
   }

   .item-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }

   .item-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
   }

   .item-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
   }

   .load-more {
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: #999;
   }

   .float-btn {
      position: fixed;
      right: 40rpx;
      bottom: 80rpx;
      width: 100rpx;
      height: 100rpx;
      background-color: #007aff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
      z-index: 999;
   }

   .float-btn .icon {
      color: #fff;
      font-size: 60rpx;
      font-weight: bold;
      line-height: 1;
      margin-top: -6rpx;
   }

   /* 按钮点击效果 */
   .float-btn:active {
      transform: scale(0.95);
      opacity: 0.9;
   }
   
   .item-tag {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: #ff5a5f;
     color: white;
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 12px;
     z-index: 1;
   }
</style>